<template>
  <div class="index">
    <div class="index-left" :style="{width:(lefeStyle==0?'240px':'50px')}">
      <LeftNavCom class="leftNavCom" :style="{display:(lefeStyle==0?'block':'none')}"/>
      <SmallLeftNavCom class="smallLeftNavCom" :style="{display:(lefeStyle==1?'block':'none')}"/>
    </div>
    <div class="index-content">
      <header>
        <span @click="lefeStyle=(lefeStyle==1?0:1)">{{ lefeStyle==0?'折叠':'展开' }}</span>
        <HeaderCom class="index-header"/>
      </header>
      <main>
        <RouterView/>
      </main>
      <footer>
      </footer>
    </div>
  </div>
</template>

<script setup>
import HeaderCom from '@/coms/HeaderCom.vue';
import LeftNavCom from '@/coms/LeftNavCom.vue';
import SmallLeftNavCom from '@/coms/SmallLeftNavCom.vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
let lefeStyle = ref(0);
let arrnum = ref(1);
const router = useRouter();





</script>

<style scoped>
.index{position: absolute; height: 1400px; display: flex; width: 100%;}
.index-left{width: 240px; height: 100%;}
.leftNavCom{position: fixed; top: 0; left: 0; display: none;}
.smallLeftNavCom{position: fixed; top: 0; left: 0; }
.index-content{flex-grow: 1;}
.index-content header{display: flex; align-items: center; justify-content: flex-start; box-shadow: 0 2px 1px 1px rgba(0, 0, 0,0.2);}
.index-content header>span{ display:block; color: gray; font-size: 10px; background-color: #304156; padding: 10px 0 10px 10px;}
</style>